<template>
	<view class="discuss">
		<view class="discuss-user">
			<image class="discuss-user-avatar" :src="avatar" ></image>
			<text  class="discuss-user-name">{{ name }}</text>
			<view class="discuss-user-zan">
				<image :src="isZan?zanOnSrc:zanSrc" mode="widthFix" @click="$emit('zan')"></image>
				<text>{{zan}}</text>
			</view>
		</view>
		<view class="discuess-content">{{ content }}</view>
		<view class="discuess-time">{{ time }}</view>
		<view class="discuess-imgs">
			<image v-for="(item, index) in imgs" :src="item" :key="index" @click="handlePreview(index)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			name:{
				type:String,
			},
			avatar:{
				type:String,
			},
			content:{
				type:String,
			},
			time:{
				type:String,
			},
			imgs:{
				type:Array,
				default:()=>[]
			},
			zan:{
				type: Number,
				default: 0
			},
			isZan:{
				type: Boolean
			}
		},
		data(){
			return {
				zanSrc:`data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg t="1718591768729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5104" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M757.76 852.906667c36.906667-0.021333 72.832-30.208 79.296-66.56l51.093333-287.04c10.069333-56.469333-27.093333-100.522667-84.373333-100.096l-10.261333 0.085333a19972.266667 19972.266667 0 0 1-52.842667 0.362667 3552.853333 3552.853333 0 0 1-56.746667 0l-30.997333-0.426667 11.498667-28.8c10.24-25.642667 21.76-95.744 21.504-128.021333-0.618667-73.045333-31.36-114.858667-69.290667-114.410667-46.613333 0.554667-69.461333 23.466667-69.333333 91.136 0.213333 112.661333-102.144 226.112-225.130667 225.109333a1214.08 1214.08 0 0 0-20.629333 0l-3.52 0.042667c-0.192 0 0.64 409.109333 0.64 409.109333 0-0.085333 459.093333-0.490667 459.093333-0.490666z m-17.301333-495.914667a15332.288 15332.288 0 0 0 52.693333-0.362667l10.282667-0.085333c84.010667-0.618667 141.44 67.52 126.72 150.250667L879.061333 793.813333c-10.090667 56.661333-63.68 101.696-121.258666 101.76l-458.922667 0.384A42.666667 42.666667 0 0 1 256 853.546667l-0.853333-409.173334a42.624 42.624 0 0 1 42.346666-42.730666l3.669334-0.042667c5.909333-0.064 13.12-0.064 21.333333 0 98.176 0.789333 182.293333-92.437333 182.144-182.378667C504.469333 128.021333 546.24 86.186667 616.106667 85.333333c65.173333-0.768 111.68 62.506667 112.448 156.714667 0.256 28.48-6.848 78.826667-15.701334 115.050667 8.021333 0 17.28-0.042667 27.584-0.106667zM170.666667 448v405.333333h23.466666a21.333333 21.333333 0 0 1 0 42.666667H154.837333A26.709333 26.709333 0 0 1 128 869.333333v-437.333333c0-14.784 12.074667-26.666667 26.773333-26.666667h38.912a21.333333 21.333333 0 0 1 0 42.666667H170.666667z" fill="#3D3D3D" p-id="5105"></path></svg>')}`,
				zanOnSrc:`data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg t="1718591773021" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5266" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M710.549333 384.810667a12409.045333 12409.045333 0 0 0 47.466667-0.32l8.746667-0.085334c83.989333-0.618667 141.44 67.584 126.72 150.229334L847.296 794.026667c-10.026667 56.448-63.914667 101.546667-121.130667 101.589333L298.624 896a42.730667 42.730667 0 0 1-42.666667-42.410667l-0.810666-383.978666a42.666667 42.666667 0 0 1 42.026666-42.666667l3.157334-0.064c5.226667-0.042667 11.797333-0.042667 19.626666 0 91.946667 0.768 170.88-86.698667 170.709334-170.944-0.149333-86.741333 39.786667-126.762667 106.453333-127.573333 62.250667-0.746667 106.602667 59.605333 107.349333 149.12 0.213333 26.602667-6.293333 73.237333-14.506666 107.434666 6.186667 0 13.077333-0.042667 20.586666-0.085333z m-497.706666 63.232L213.333333 874.624A21.312 21.312 0 0 1 191.786667 896H149.525333A21.333333 21.333333 0 0 1 128 874.624l0.042667-426.581333A21.269333 21.269333 0 0 1 149.44 426.666667h41.984c11.669333 0 21.418667 9.578667 21.418667 21.376z" fill="#3D3D3D" p-id="5267"></path></svg>')}`,
			}
		},
		methods:{
			handlePreview(index){
				wx.previewImage({ current: index, urls: this.imgs });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.discuss{
		padding: 20rpx 30rpx;
		background-color: #fff;
	}
	.discuss-user{
		display: flex;
		align-items: center;
		.discuss-user-avatar{
			width:70rpx;
			height: 70rpx;
			border-radius: 35rpx;
			background-color: #F4F6F5;
			flex-shrink: 0;
		}
		.discuss-user-name{
			margin-left: 10px;
			flex: 1;
		}
		.discuss-user-zan{
			height: 75rpx;
			background-color: #EBF6F0;
			border-radius: 38rpx;
			flex-shrink: 0;
			width: 150rpx;
			display: inline-flex;
			align-items: center;
			image{
				margin-left: 40rpx;
				width: 35rpx;
				height: 35rpx;
				flex-shrink: 0;
			}
			text{
				margin-left: 10rpx;
				display: block;
				width:40rpx;
				text-align:center;
			}
		}
	}
	.discuess-content{
		padding-top:20rpx;
		font-size: 35rpx;
	}
	.discuess-time{
		margin:10rpx 0;
		color: #777;
		font-size: 25rpx;
	}
	.discuess-imgs{
		image{
			width:150rpx;
			height: 120rpx;
			background-color: #EBF6F0;
			border-radius: 10rpx;
		}
		image+image{
			margin-left: 15rpx;
		}
	}
	
</style>